<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>首页</h1>
<div>
    <h2>{{info}}</h2>
    <input type="button" value="异步请求get" @click="f1()">
    <input type="button" value="异步请求post" @click="f2()">
</div>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
   let  v=new Vue({
       el:"div",
       data:{
           info:"测试Vue"
       },
       methods:{
           f1(){
              // alert("方法执行了");
               //发出异步请求 向/helloAxios 发出异步的 get请求
               //response 代表响应对象，  里面的data属性是服务器响应的内容 info=tom 传参
               axios.get("/helloAxios?info=tom").then(function  (response){
                   alert("服务响应内容："+response.data);
               })
           },
           f2(){  //data 是参数
               let data = new FormData();
               data.append("info","jerry");
               axios.post("/helloAxios",data).then(function (response) {
                   alert("接收到了响应："+response.data);
               })

           }
       }
   })
</script>
</body>
</html>